<template>
  <v-card class="info-card my-2" variant="flat">
    <v-row no-gutters>
      <!-- 左边头像部分 -->
      <v-col cols="4" class="d-flex justify-center align-center">
        <v-img
          height="140"
          :src="item.avatarUrl"
          alt="Avatar"
        ></v-img>
      </v-col>
      <!-- 右边个人信息部分 -->
      <v-col cols="8">
        <v-card-title>{{ item.name }}</v-card-title>
        <v-card-subtitle>
          年龄: {{ item.age }} 岁 | 性别: {{ item.gender }}
        </v-card-subtitle>
        <v-card-text>
          身高: {{ item.height }}cm | 体重: {{ item.weight }}kg
        </v-card-text>
      </v-col>
    </v-row>
  </v-card>
</template>

<script setup>
import { defineProps } from 'vue';

const props = defineProps({
  item: {
    type: Object,
    required: true,
    default: () => ({})
  }
});
</script>

<style scoped>
.info-card {
  max-width: 600px;
  margin: 20px auto;
}

.avatar {
  border-radius: 50%;
  overflow: hidden;
}
</style>
